<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title data-th-text="#{tutor.password.title}">团队密码更改</title>
    <link rel="stylesheet" href="../../webjars/bootstrap/dist/css/bootstrap.min.css"
          data-th-href="@{/webjars/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../webjars/bootstrap-material-design/dist/bootstrap-material-design.min.css"
          data-th-href="@{/webjars/bootstrap-material-design/dist/bootstrap-material-design.min.css}">
    <link rel="stylesheet" href="../../static/css/bg.css" data-th-href="@{/static/css/bg.css}">
    <style type="text/css">
        .input-group-addon {
            color: rgb(100, 114, 116);
        }

        .form-control:focus {
            color: black;
        }

        #submit {
            background: rgba(0, 0, 0, .12);
        }

        #submit:hover {
            background: rgba(0, 0, 128, .22);
        }
    </style>
</head>

<body>
<div id="bg"></div>
<nav class="navbar navbar-toggleable-md fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img src="../../static/image/favicon.svg"
                     data-th-src="@{/static/image/favicon.svg}"
                     width="30" height="30" class="d-inline-block align-top">项目管理系统
            </a>
        </div>
    </div>
</nav>
<div class="container-fluid pt-md-3">
    <div class="row">
        <<div class="col-md-3 offset-md-1">
        <div class="list-group pt-md-0">
            <a href="#" class="list-group-item active">
                我的菜单
            </a>
            <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">基本信息</a>
            <a href="profile.html" data-th-href="@{'/team/' + ${teamId}}" class="list-group-item">个人信息</a>
            <a href="password.html" data-th-href="@{'/team/' + ${teamId}} + '/password'"
               class="list-group-item">密码修改</a>
            <a href="#" class="list-group-item" style="background-color: rgba(200,230,201,0.41)">项目报告</a>
            <a href="reports.html" data-th-href="@{'/team/' + ${teamId}} + '/report'" class="list-group-item">提交与查看</a>
        </div>
    </div>
        <div class="col-md-7 pl-md-0">
            <h1 data-th-text="#{team.password.title}" style="text-align: center;">
                团队密码更改
            </h1>
            <form id="passwordForm" class="form-horizontal" data-th-action="${formAction}" method="post">
                <div class="row">
                    <div data-th-if="${passwordError}" class="alert alert-warning alert-dismissible fade show col-12"
                         role="alert" id="alert-incorrect">
                        <button type="button" class="close m-0 p-0" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <span data-th-text="#{old-password.mismatch}">原密码错误</span>
                    </div>
                    <div data-th-if="${success}" class="alert alert-success alert-dismissible fade show col-12"
                         role="alert" id="alert-success">
                        <button type="button" class="close m-0 p-0" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <span data-th-text="#{password.update.success}">密码修改成功</span>
                    </div>
                </div>
                <input type="hidden" name="confirmPasswordMismatch" id="confirmPasswordMismatch" value="确认密码不一致"
                       data-th-value="#{confirm-password.mismatch}"/>
                <div class="form-group row mt-3">
                    <div class="input-group col-md-12">
                        <label for="oldPassword" class="input-group-addon" data-th-text="#{old-password}">原密码</label>
                        <input type="password" class="form-control" id="oldPassword" name="oldPassword" required/>
                    </div>
                </div>
                <div class="form-group row mt-3">
                    <div class="input-group col-md-12">
                        <label for="newPassword" class="input-group-addon" data-th-text="#{new-password}">新密码</label>
                        <input type="password" class="form-control" id="newPassword" name="newPassword" required/>
                    </div>
                </div>
                <div class="form-group row mt-3">
                    <div class="input-group col-md-12">
                        <label for="confirmPassword" class="input-group-addon"
                               data-th-text="#{confirm-password}">确认密码</label>
                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                               required/>
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block" data-th-text="#{submit}"
                            id="submit">提交
                    </button>
                </div>
            </form>
        </div>
    </div>

    <footer class="row clearfix" data-th-replace="~{footer::normal}">
        <div class="col-md-10 offset-md-1 column">
            <ul class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.about}">关于我们</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.feedback}">意见反馈</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.help}">帮助中心</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" data-th-text="#{footer.us}">联系我们</a>
                </li>
                <li class="breadcrumb-item active">
                    All rights reserved
                </li>
            </ul>
        </div>
    </footer>
</div>
<script src="../../webjars/jquery/dist/jquery.min.js" data-th-src="@{/webjars/jquery/dist/jquery.min.js}"></script>
<script src="../../webjars/tether/dist/js/tether.min.js"
        data-th-src="@{/webjars/tether/dist/js/tether.min.js}"></script>
<script src="../../webjars/bootstrap/dist/js/bootstrap.min.js"
        data-th-src="@{/webjars/bootstrap/dist/js/bootstrap.min.js}"></script>
<script>
    $(function () {
        $("#submit").click(function () {
            var password = $("#newPassword").val();
            var confirmPassword = $("#confirmPassword").val();
            if (password === confirmPassword) {
                return true;
            } else {
                $("#passwordForm").prepend('<div class="row"><div class="alert alert-warning alert-dismissible fade show col-12" role="alert"><button type="button" class="close m-0 p-0" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + $("#confirmPasswordMismatch").val() + '</div></div>');
                return false;
            }

        });
    });
</script>
</body>
</html>